<template>
	<view class="container">
		<!-- 顶栏项目名称 -->
		<view class="top-bar">
			<view class="project-name" v-for="(item, idx) in projectList" :key="item.id"
				@longpress="handleLongPress(item.id)" @click="handleClick(item.id)">
				{{ item.name }}
			</view>
		</view>

		<!-- 主体内容 -->
		<view class=" main-content">
			<!-- 左侧支出统计 -->
			<view class="charts-box-left">
				<qiun-data-charts type="bar" :opts="opts_heng" :chartData="chartData_heng" />
			</view>
			<!-- 右侧扇形图 -->
			<view class="charts-box">
				<qiun-data-charts type="pie" :opts="opts_bing" :chartData="chartData_bing" />
			</view>
		</view>

		<!-- 下方折线图 -->
		<view class="line-chart">
			<qiun-data-charts type="line" :chartData="chartData_zhexian" />
		</view>
	</view>
</template>

<script>
	export default {
		name: 'PeoplePage',
		data() {
			return {
				chartData_heng: {},
				chartData_bing: {},
				chartData_zhexian: {},
				projectList: [{
					id: 1,
					name: "项目1"
				}, {
					id: 2,
					name: "项目2"
				}],
				opts_heng: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 30, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						min: 0,
						axisLine: false,
						max: 40
					},
					yAxis: {},
					extra: {
						bar: {
							type: "group",
							width: 30,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							linearType: "custom",
							barBorderCircle: true,
							seriesGap: 2,
							categoryGap: 2
						}
					}
				},
				opts_bing: {
					extra: {
						pie: {
							ringWidth: 0, // 不需要环形效果
							lineWidth: 0, // 无边框线
							customRadius: 80, // 设置饼图半径为容器宽度的 70%

						}
					}
				},
			}
		},
		onReady() {
			this.getServerData_bing();
			this.getServerData_zhexian();
			this.getServerData_heng();
		},
		methods: {
			handleLongPress(index) {
				// 长按时跳转页面
				uni.navigateTo({
					url: '/pages/otherPage/index?id=' + index // 根据实际需求修改跳转路径
				});
			},
			handleClick(index) {
				// 点击时切换项目
				this.currentProjectIndex = index;
				this.getServerData_bing();
				this.getServerData_zhexian();
				this.getServerData_heng();
			},
			updateProjectData() {
				// 更新项目数据的逻辑，根据 `currentProjectIndex` 获取并展示对应项目的数据
				console.log('Updating project data for index:', this.currentProjectIndex);
			},
			getServerData_bing() {
				setTimeout(() => {
					let res = {
						series: [{
							data: [{
								"name": "一班",
								"value": 50,
								"labelShow": false
							}, {
								"name": "二班",
								"value": 30,
								"labelShow": false
							}, {
								"name": "三班",
								"value": 20,
								"labelShow": false
							}, {
								"name": "四班",
								"value": 18,
								"labelShow": false
							}, {
								"name": "五班",
								"value": 8,
								"labelShow": false
							}]
						}],
					};
					this.chartData_bing = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getServerData_zhexian() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res = {
						categories: ["1+号", "2号", "3号", "4号", "5号", "6号"],
						series: [{
								name: "预算",
								data: [35, 36, 31, 33, 13, 34]
							},
							{
								name: "支出",
								data: [18, 27, 21, 24, 6, 28]
							}
						]
					};
					this.chartData_zhexian = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			getServerData_heng() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023"],
						series: [{
								name: "目标值",
								data: [35, 36, 31, 33, 13, 34]
							},
							{
								name: "完成量",
								data: [18, 27, 21, 24, 6, 28]
							}
						]
					};
					this.chartData_heng = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		},

	}
</script>

<style scoped>
	.charts-box-left {
		width: 50%;
		/* 左侧图表占 50% 宽度 */
		height: 300px;
	}

	.charts-box {
		width: 50%;
		/* 右侧图表占 50% 宽度 */
		height: 300px;
	}

	.container {
		padding: 20rpx;
	}

	.top-bar {
		display: flex;
		flex-direction: row;
		margin-bottom: 20rpx;
	}

	.project-name,
	.project-more {
		border: 1px solid #ccc;
		padding: 10rpx 30rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.main-content {
		display: flex;
		flex-direction: row;
		/* 确保子元素水平排列 */
	}

	.stat-box {
		width: 140rpx;
		height: 260rpx;
		border: 1px solid #aaa;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
	}

	.stat-title {
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}

	.stat-amount {
		font-size: 36rpx;
		font-weight: bold;
	}

	.pie-chart {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #aaa;
		border-radius: 50%;
		width: 320rpx;
		height: 320rpx;
	}

	.line-chart {
		width: 100%;
		height: 300px;
	}
</style>